<template>
    <div class="form-select" :class="{active:active}">
        <p>
            <em v-if="selected" v-text="selected.label"></em>
            <span v-text="placeholder" v-else></span>

            <i v-if="selected && clearable" @click="selected && setSelect()"><svg-icon name="select-clear" /></i>
            <b v-else><svg-icon name="tree-down" /></b>
        </p>
        <blockquote>
            <ul v-if="list.length > 0">
                <li v-for="item in list" :key="item.id" :class="{active:value == item.value}" @click="setSelect(item)">
                    <span v-text="item.label"></span>
                </li>
            </ul>
            <span v-else>No data</span>
        </blockquote>
    </div>
</template>
<script>
export default {
    props: {
        placeholder: { type: String, default: '' },
        value: { type: [String, Number], default: '' },
        options: { type: Array, default: () => [] },
        clearable: { type: Boolean, default: true },
    },
    data () {
        return {
            stores: [],
            active: false,
        };
    },
    computed: {
        list () {
            return this.options.concat(this.stores)
        },
        selected () {
            return this.value ? this.list.find(i => i.value == this.value) : null;
        }
    },

    methods: {

        setSelect (item) {
            if (item) {
                this.$emit('input', item.value)
                this.$emit('change', item.value)
                this.active = false;
            } else {
                this.$emit('input', '')
                this.$emit('change', '')
            }
        },

        onClick (event) {
            const button = event.target.closest('.form-select p')
            const contains = this.$el.contains(event.target)
            if (contains && button) {
                event.stopPropagation();
                event.preventDefault();
                this.active = !this.active;
            } else if (contains && event.target.closest('.form-select blockquote')) {
                // 对话框中的，不管
                event.stopPropagation();
                event.preventDefault();
            } else {
                this.active = false
            }
        },

    },
    created () {
    },

    mounted () {
        window.addEventListener('click', this.onClick)
    },
    beforeDestroy () {
        window.removeEventListener('click', this.onClick)
    }
};
</script>
<style lang="scss" scoped>
.form-select {
    width: 200px;
    height: 40px;
    position: relative;

    & > p {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 12px;
        flex: 1;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        border-radius: 8px;
        transition: all 0.2s;
        overflow: hidden;
        cursor: pointer;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;

        & > span {
            flex: 1;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 400;
            color: #757575;
        }
        & > em {
            flex: 1;
            color: #000;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            & ~ i {
                min-width: 14px;
                width: 14px;
                height: 14px;
            }
        }
        & > b {
            min-width: 12px;
            width: 12px;
            height: 12px;
            transition: all 0.2s;
            svg {
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }

        & > i {
            min-width: 12px;
            width: 12px;
            height: 12px;
            transition: all 0.2s;
            color: #909090;
            &:hover {
                color: #000;
            }
            svg {
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }

        &:hover {
            border-color: #c7c7c7;
            i {
                color: #757575;
            }
        }
    }

    blockquote {
        position: absolute;
        left: -1px;
        right: -1px;
        top: 100%;
        margin: -3px 0 0;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        border: 1px solid #ebebeb;
        z-index: 3;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s;

        & > span {
            display: block;
            padding: 6px;
            line-height: 34px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #9e9e9e;
            text-align: center;
        }

        ul {
            padding: 6px;
        }

        li {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 6px;
            height: 34px;
            border-radius: 6px;
            cursor: pointer;
            color: #555555;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            white-space: nowrap;
            span {
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &:hover {
                background: #f6f6f6;
            }

            &.active {
                color: #000;
            }
        }
    }

    &.active {
        p {
            border-color: #f6b2cd;
            box-shadow: 0 0 1px 1px #f6b2cd;
            & > b {
                transform: rotate(180deg);
            }
        }

        blockquote {
            opacity: 1;
            pointer-events: all;
            margin-top: 8px;
        }
    }
}
</style>
